<nz-card [nzBordered]="false">
    <div class="content1">
        <nz-card nzType="inner" nzTitle="列表" [nzSize]="'small'">
            <nz-tree [nzData]="nodes" (nzClick)="select($event)" nzBlockNode nzShowLine nzExpandAll [nzTreeTemplate]="nzTreeTemplate">

            </nz-tree>
            <ng-template #nzTreeTemplate let-node>
                <span class="custom-node" [class.active]="activedNode?.key === node.key">
                    <span>{{ node.title }}</span>
                <a class="node-add a-operate" *ngIf="activedNode?.key === node.key && !node.isLeaf && checkAuth('App_Add_1_16384')" (click)="addNode($event)">添加</a>
                </span>
            </ng-template>
        </nz-card>
    </div>
    <div class="content2" *ngIf="type===1||type===2">
        <nz-card nzType="inner" nzTitle="详情" [nzSize]="'small'">
            <form [formGroup]="form">
                <nz-form-item>
                    <nz-form-label nzRequired [nzSpan]="4">标题</nz-form-label>
                    <nz-form-control [nzSpan]="18" nzErrorTip="必填">
                        <input nz-input id="title" formControlName="Name" autocomplete="off" />
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item *ngIf="type===1">
                    <nz-form-label nzRequired [nzSpan]="4">图标</nz-form-label>
                    <nz-form-control [nzSpan]="18" nzErrorTip="必填">
                        <!-- <nz-input-group [nzPrefix]="prefixTemplateIcon" [nzSuffix]="suffixIconSearch">
                            <input nz-input id="icon" formControlName="fIcon" #inputIcon [nzAutocomplete]="auto" (input)="onInputIcon($event)" (keydown)="onKeyDownIcon($event)" style="ime-mode:disabled;" />
                        </nz-input-group>
                        <ng-template #prefixTemplateIcon>
                            <i nz-icon [nzType]="inputIcon.value" class="iconfont"></i>
                        </ng-template>
                        <ng-template #suffixIconSearch>
                            <i nz-icon nzType="search"></i>
                        </ng-template>
                        <nz-autocomplete #auto>
                            <nz-auto-option *ngFor="let name of iconList" [nzValue]="name" [nzLabel]="name">
                                <i nz-icon [nzType]="name" style="font-size: 16px;"></i>
                            </nz-auto-option>
                        </nz-autocomplete> -->
                        <nz-select nzAllowClear [nzCustomTemplate]="selectTmp" formControlName="Icon" nzDropdownClassName="selectDiv">
                            <nz-option nzCustomContent *ngFor="let name of iconList" [nzValue]="name" [nzLabel]="name">
                                <i nz-icon [nzType]="name" style="font-size: 16px;"></i>
                                <!-- <span>{{name}}</span> -->
                            </nz-option>
                        </nz-select>
                        <ng-template #selectTmp let-selected> <i nz-icon [nzType]="selected.nzValue" style="font-size: 16px;"></i> {{ selected.nzLabel }} </ng-template>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item *ngIf="type===2">
                    <nz-form-label nzRequired [nzSpan]="4">路由</nz-form-label>
                    <nz-form-control [nzSpan]="18" nzErrorTip="必填">
                        <input nz-input id="url" formControlName="RouterUrl" autocomplete="off" />
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item *ngIf="type===1||type===2">
                    <nz-form-label nzRequired [nzSpan]="4">排序</nz-form-label>
                    <nz-form-control [nzSpan]="18" nzErrorTip="必填">
                        <nz-input-number id="sort" formControlName="Sort"></nz-input-number>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label nzRequired [nzSpan]="4">别名</nz-form-label>
                    <nz-form-control [nzSpan]="18" [nzErrorTip]="AliasErrorTpl">
                        <input nz-input id="alias" formControlName="Alias" autocomplete="off" />
                    </nz-form-control>
                    <ng-template #AliasErrorTpl>
                        <ng-container *ngIf="Alias.dirty && Alias.errors?.required">必填</ng-container>
                        <ng-container *ngIf="Alias.dirty && Alias.errors?.pattern">只能输入英文</ng-container>
                    </ng-template>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSpan]="4">编码</nz-form-label>
                    <nz-form-control [nzSpan]="18">
                        <input nz-input id="code" formControlName="Code" />
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label nzNoColon [nzSpan]="4"></nz-form-label>
                    <button nz-button nzType="primary" [nzSize]="'small'" (click)="updateNode()" *ngIf="checkAuth('App_Update_1_32768')">更新</button>
                    <button nz-button nzType="primary" nzDanger [nzSize]="'small'" style="margin-left: 12px;" (click)="deleteNode()" *ngIf="checkAuth('App_Delete_1_65536')">删除</button>
                </nz-form-item>
            </form>
        </nz-card>
    </div>
    <div class="content3" *ngIf="type===2">
        <nz-card nzType="inner" nzTitle="资源" [nzSize]="'small'">

            <button nz-button nzType="primary" [nzSize]="'small'" (click)="addResource()" *ngIf="checkAuth('App_Add_1_16384')" style="margin-bottom: 10px;">添加</button>
            <nz-table #nzTable [nzSize]="'small'" [nzData]="resourceData" [nzHideOnSinglePage]="true">
                <thead>
                    <tr>
                        <th nzWidth="60px" nzLeft="0px">序号</th>
                        <th nzWidth="130px" nzLeft="60px">名称</th>
                        <th nzWidth="150px">别名</th>
                        <th>编码</th>
                        <th nzWidth="80px">排序值</th>
                        <th nzWidth="90px" nzRight="0px">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let d of nzTable.data;let idx=index;">
                        <td nzLeft="0px">{{idx+1}}</td>
                        <td nzLeft="60px">
                            <ng-container *ngIf="!editCache[d.Id].edit; else NameInputTpl">
                                {{ d.Name }}
                            </ng-container>
                            <ng-template #NameInputTpl>
                                <input type="text" nz-input [(ngModel)]="editCache[d.Id].data.Name" />
                            </ng-template>
                        </td>
                        <td>
                            <ng-container *ngIf="!editCache[d.Id].edit; else AliasInputTpl">
                                {{ d.Alias }}
                            </ng-container>
                            <ng-template #AliasInputTpl>
                                <input type="text" nz-input [(ngModel)]="editCache[d.Id].data.Alias" />
                            </ng-template>
                        </td>
                        <td>{{d.ResourceCode}}</td>
                        <td>
                            <ng-container *ngIf="!editCache[d.Id].edit; else sortInputTpl">
                                {{ d.Sort }}
                            </ng-container>
                            <ng-template #sortInputTpl>
                                <nz-input-number [(ngModel)]="editCache[d.Id].data.Sort"></nz-input-number>
                            </ng-template>
                        </td>
                        <td nzRight="0px">
                            <ng-container *ngIf="!editCache[d.Id].edit; else saveTpl">
                                <a (click)="startEdit(d.Id)" *ngIf="checkAuth('App_Update_1_32768')" class="a-operate">编辑</a>
                                <a nz-popconfirm (nzOnConfirm)="deleteResource(d.Id)" nzPopconfirmTitle="确定删除?" *ngIf="checkAuth('App_Delete_1_65536')" class="ml10 a-operate">删除</a>
                            </ng-container>
                            <ng-template #saveTpl>
                                <a (click)="saveEdit(d.Id)" class="a-operate">保存</a>
                                <a (click)="cancelEdit(d.Id)" class="ml10 a-operate">取消</a>
                            </ng-template>
                            <!-- <a href="javascript:;" (click)="edit(d.Id)"></a> -->
                            <!-- <nz-divider nzType="vertical"></nz-divider> -->

                        </td>
                    </tr>
                </tbody>
            </nz-table>

        </nz-card>
    </div>
</nz-card>

<dialog-application-edit #DiaglogApplicationEdit [type]="type" [title]="title" [Id]="activedNode?.key" (onSave)="saveAddNode()"></dialog-application-edit>
<dialog-resource-edit #DiaglogResourceEdit [Id]="activedNode?.key" (onSave)="saveAddResource()"></dialog-resource-edit>